<template>
	<div class="breadcrumb">
		<span v-for="(route, index) in routes" :key="index">
			{{ index > 0 ? '/' : '' }} <a :href="route.route">{{ route.title }}</a>
		</span>
	</div>
</template>

<script>
	module.exports = {
		name: "breadcrumb",
		props: ['route'],
		data() {
			return {
				routes: []
			}
		},
		created() {
			this.splitRoute()
		},
		methods: {
			splitRoute() {
				this.routes = [{
					title: '首页',
					route: '?'
				}];
				let tempRoute = this.route;
				if (tempRoute !== 'home') {
					if (tempRoute.indexOf('archive') === 0) {
						let repairRoute = '?route=archive';
						this.routes = [...this.routes, {
							title: '档案',
							route: repairRoute
						}]
						this.joinRoute((app.getQueryString('dir') || '').replace("blog/", "").split('/'), 'dir', repairRoute);
					} else if (tempRoute.indexOf('blog') === 0) {
						let repairRoute = '?route=archive';
						this.routes = [...this.routes, {
							title: '档案',
							route: repairRoute
						}]
						let routes = (app.getQueryString('path') || '').replace("blog/", "").split('/')
						let lastRoute = routes[routes.length - 1];
						routes.pop();
						this.joinRoute(routes, 'dir', repairRoute);
						this.routes = [...this.routes, {
							title: lastRoute,
							route: decodeURIComponent(window.location.search)
						}]
					} else if (tempRoute.indexOf('about') === 0) {
						let repairRoute = '?route=about';
						this.routes = [...this.routes, {
							title: '关于',
							route: repairRoute
						}]
					}
				}
			},
			joinRoute(tempRoutes, ljf, repairRoute) {
				var this_ = this;
				var route = '&' + ljf + '=';
				tempRoutes.forEach(function(item) {
					if (item !== '') {
						route += item + '/';
						this_.routes = [...this_.routes, {
							title: item,
							route: (repairRoute + route).slice(0, -1)
						}]
					}
				});
			}
		},
	}
</script>

<style scoped>
	.breadcrumb {
		margin-top: 80px;
		padding: 0 0 0 20px;
	}

	.breadcrumb span {
		font-size: 12px;
	}
</style>
